<template>
	<view class="zone">
		<Header title="背包"></Header>
		<view class="main">
			<view class="tantabs">
				<view :class="['tab',tanStat==item.id?'act':'']" v-for="(item,index) in tanlist" :key="index"
					@click="changeTan(item,index)">
					{{item.name}}
				</view>
			</view>

			<view class="tbk">
				<scroll-view scroll-x class="tabs">
					<view :class="['tab',stat==item.type?'act':'']" v-for="(item,index) in shaiList" :key="index"
						@click="changeTab(item.type,index)">
						{{item.name}}
					</view>
				</scroll-view>

				<view class="part" v-for="(item,index) in list" :key="index+'a'" @click="openProp(item,1)">
					<view :class="['link','bg'+item.quality]">
						<image class="img1" :src="item.img" mode="widthFix"></image>
						<text class="num" v-if="item.number!=1">{{parseInt(item.number)}}</text>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				<view class="part" v-for="(item,index) in list2" :key="index+'b'" @click="openProp(item,2)">
					<view :class="['link','bg'+item.quality]">
						<image class="img1" :src="item.img" mode="widthFix"></image>
						<text class="num" v-if="item.number!=1">{{parseInt(item.number)}}</text>
						<view class="fight">
							战力:{{item.fight}}
						</view>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				<view class="part" v-for="(item,index) in list3" :key="index+'c'" @click="openProp(item,3)">
					<view :class="['link','bg'+item.quality]">
						<image class="img1" :src="item.img" mode="widthFix"></image>
						<text class="num" v-if="item.number!=1">{{parseInt(item.number)}}</text>
						<view class="fight">
							战力:{{item.fight}}
						</view>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>

				<view class="empty" v-if="list.length==0&&list2.length==0&&list3.length==0">
					<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
					<text class="hui">
						没有数据哦~
					</text>
				</view>

			</view>
		</view>


		<!-- 物品详情 -->
		<u-mask :show="detail">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="jihuop">
							<view class="wupo">
								<image :class="['wuimg','bg'+tanquality]" :src="tanImg" mode="widthFix"></image>

								<view class="wubox">
									<view class="wuname">
										{{tanName}}
									</view>
									<view class="wunum">
										当前拥有:<text class="color">{{tanNum}}</text>
									</view>
								</view>

							</view>
							<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png" mode="widthFix">
							</image>
							<view class="wujieshao">
								{{tanInfo}}
							</view>
							<view v-if="tanType!=0">
								<view class="bujingqi" v-if='tanhidden==1'>
									<Number placeholder='请输入出售数量' v-model="value" size="25px" :min="1" :max="10000"
										:input-width="300" color="#fff">
									</Number>
								</view>
								<view class="dangqian">
									出售单价<text class="col">{{tanPrice}}{{tanType==1?'铜钱':tanType==2?'灵石':''}}</text>
								</view>
								<u-button v-if="tanhidden==1" :plain="true" :hair-line="false" hover-class="none"
									:throttle-time="1000" class="refineCon" @click="chushou">出售</u-button>
								<u-button v-if="tanhidden==2" :plain="true" :hair-line="false" hover-class="none"
									:throttle-time="1000" class="refineCon" @click="chushou2">出售</u-button>
								<u-button v-if="tanhidden==3" :plain="true" :hair-line="false" hover-class="none"
									:throttle-time="1000" class="refineCon" @click="chushou3">出售</u-button>
								<view class="chsab">
									出售{{value}}个可获得{{value*tanPrice}}{{tanType==1?'铜钱':tanType==2?'灵石':''}}
								</view>
							</view>


						</view>

					</view>
				</view>
				<image class="m_close" @click="detail = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts">
								<view class="sbimg">
									<image class="tanimg"
										:src="tanType==1?'http://image.qxgm.site/tdz/img/tk/mg-04.png':'http://image.qxgm.site/tdz/img/tk/mg-03.png'"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									{{tanType==1?'铜钱':tanType==2?'灵石':''}}*{{huodeNum}}
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				tanStat: 0,
				stat: 1,
				obtain: false,
				detail: false,
				tanlist: [], //第一层
				shaiList: [], //第二层
				shaList: [], // 筛选实物列表
				list: [],
				dantab: 1,
				opendan: 0,
				tanType: '',
				tanName: '',
				tanquality: '',
				tanImg: '',
				tanNum: '',
				tanInfo: '',
				tanPrice: '',
				tanhidden: '',
				props_id: '',
				huodeNum: '',
				list: [],
				list2: [],
				list3: [],
			}
		},
		onLoad() {
			this.myEquip();
			this.getfenlei()
		},
		onShow() {

		},
		methods: {
			// 分类
			async getfenlei(id) {
				this.shaList = [{
					name: '全部',
					id: 0,
					cate: []
				}]
				let res = await this.$http.index.backpackCate();
				if (res.code == 1) {
					this.tanlist = [...this.shaList, ...res.data]
					this.tanlist.map(item => {
						item.isrequest = false
					})
				}
				this.tradeList()
			},
			// 请求道具列表
			tradeList() {
				this.shaiList = this.tanlist[this.tanStat].cate
				this.shaiList.map(item => {
					item.isrequest = false
				})
				console.log(this.shaiList);
			},
			// 切换 第一层
			changeTan(item, index) {
				if (this.tanStat == item.id) return;
				this.tanStat = item.id
				if (this.tanStat == 0) {
					this.shaiList = []
					this.myEquip();
				} else {
					this.stat = this.tanlist[index].cate[0].type
					this.tradeList()
					this.myEquip();
				}

			},
			// 切换 第二层
			async changeTab(id, index) {
				if (this.stat == id) return;
				this.stat = this.tanlist[this.tanStat].cate[index].type
				this.myEquip();
			},

			// 我的背包
			async myEquip() {
				this.list = []
				this.list2 = []
				this.list3 = []
				let res = await this.$http.index.backpackList({
					cate: this.tanStat,
					type: this.stat
				});

				if (res.code == 1) {
					this.list = res.data.props
					this.list2 = res.data.kit
					this.list3 = res.data.faqi
				}
			},

			// 打开弹框
			openProp(item, type) {
				console.log(item, type);
				// 丹药
				if (type == 1) {
					this.tanquality = item.quality
					this.tanType = item.back_type
					this.tanName = item.name
					this.tanImg = item.img
					this.tanNum = item.number
					this.tanInfo = item.info
					this.tanPrice = item.back_price
					this.props_id = item.props_id
					this.tanhidden = 1
				} else if (type == 2) {
					//装备
					this.tanquality = item.quality
					this.tanhidden = 2
					this.tanType = 1
					this.tanName = item.name
					this.tanImg = item.img
					this.tanNum = item.number
					this.tanInfo = '装备后可提升大量战力，可通过秘境或市场获得'
					this.tanPrice = item.price
					this.props_id = item.backpack_id
				} else if (type == 3) {
					// 法器
					this.tanquality = item.quality
					this.tanhidden = 3
					this.tanType = 2
					this.tanName = item.name
					this.tanImg = item.img
					this.tanNum = item.number
					this.tanInfo = '装备后可提升大量战力，可通过秘境或市场获得'
					this.tanPrice = item.price
					this.props_id = item.backpack_id
				}
				this.detail = true
			},
			// 出售丹药
			async chushou() {
				let res = await this.$http.index.backpackSysback({
					props_id: this.props_id,
					number: this.value
				})
				if (res.code == 1) {
					this.myEquip();
					this.detail = false
					this.huodeNum = res.data.number
					this.obtain = true
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 出售装备
			async chushou2() {
				let res = await this.$http.index.backpackSysbackKit({
					backpack_id: this.props_id,
					number: this.value
				})
				if (res.code == 1) {
					this.myEquip();
					this.detail = false
					this.huodeNum = res.data.number
					this.obtain = true
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 出售法器
			async chushou3() {
				let res = await this.$http.index.backpackSysbackFaqi({
					backpack_id: this.props_id,
					number: this.value
				})
				if (res.code == 1) {
					this.myEquip();
					this.detail = false
					this.huodeNum = res.data.number
					this.obtain = true
				} else {
					this.$u.toast(res.msg)
				}
			},
		},

	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background-image: url(http://image.qxgm.site/tdz/img/backpack/1.png), url(http://image.qxgm.site/tdz/img/backpack/2.png);
		background-repeat: no-repeat, no-repeat;
		background-size: 100% auto, 100% 100%;
	}

	.vis {
		visibility: hidden;
	}

	.tantabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/lingchong/mg-04.png) no-repeat;
		background-size: 100% 100%;
		padding: 6px 12px;
		margin-top: 30%;

		.tab {
			width: 19%;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			box-sizing: border-box;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.tbk {
		padding: 0px 6px 0px;
		height: calc(100vh - 222px);
		overflow-y: scroll;

		.tabs {
			width: 100%;
			white-space: nowrap;

			.tab {
				display: inline-block;
				width: 20%;
				background: url(http://image.qxgm.site/tdz/img/market/mg-04.png) no-repeat;
				background-size: 100% 100%;
				text-align: center;
				font-size: 14px;
				font-weight: normal;
				color: #FFFED0;
				line-height: 27px;
				padding: 0px 0 6px;
				margin-right: 5px;
			}

			.act {
				color: #A97D45;
				background: url(http://image.qxgm.site/tdz/img/market/mg-05.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.cinfo {
			background: linear-gradient(0deg, rgba(255, 255, 255, 0.34), rgba(237, 252, 253, 0.34));
			border-radius: 5px;
			height: calc(87vh - 128px);
			overflow-y: scroll;
			padding: 8px;
		}

		.part {
			display: inline-block;
			position: relative;
			width: 20%;
			text-align: center;
			margin-bottom: 5px;
		}

		.link {
			position: relative;
			padding: 5px 9px;
		}



		.img1 {
			width: 100%;
		}

		.num {
			position: absolute;
			bottom: 10px;
			right: 10px;
			font-size: 13px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 13px;
			text-shadow: 0 1px 1px #000;
			z-index: 1;
		}

		.name {
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 12px;
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
			/*文本超出三点代替*/
			margin-top: 4px;
		}
	}

	.sou {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		padding: 6px 15px;
		margin-bottom: 8px;
	}

	.fight {
		position: absolute;
		right: 5px;
		bottom: 5px;
		font-size: 12px;
		color: #fff;
	}

	.sou1 {
		font-size: 14px;
		font-weight: normal;
		color: #686766;
		line-height: 24px;
	}

	.sou2 {
		width: 11px;
		margin-right: 20px;
	}



	.option {
		position: absolute;
		right: -18px;
		top: 26px;
		background: url(http://image.qxgm.site/tdz/img/backpack/tbg.png) no-repeat;
		background-size: 100% 100%;
		z-index: 9;
		width: 35%;
		text-align: center;
		box-sizing: border-box;
		padding: 20px 6px 30px;

		.tion {
			display: block;
			margin: 0 auto;
			width: 72%;
			font-size: 13px;
			font-weight: normal;
			color: #A97D45;
			line-height: 13px;
			border-bottom: 1px solid #f3d0b5;
			padding: 7px 0;
		}

		.sac {
			background: url(http://image.qxgm.site/tdz/img/backpack/tbg2.png) no-repeat;
			background-size: 100% 100%;
		}
	}



	.jihuop2 {
		padding: 0 8%;
	}

	.danbox1 {
		display: flex;
		align-items: center;
		padding: 0 0px 0 4px;

		.tandanimg {
			width: 50px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			padding: 4px 5px;
			box-sizing: border-box;
			margin-right: 9px;
		}

		.tanname2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 13px;

			.t1 {
				font-size: 18px;
				font-weight: normal;
				color: #333333;
				line-height: 18px;
			}

			.t2 {
				font-size: 12px;
				font-weight: normal;
				color: #666666;
				line-height: 12px;
			}
		}

		.tanname3 {
			font-size: 12px;
			font-weight: normal;
			color: #666666;
			line-height: 12px;
		}
	}

	.bujingqi {
		text-align: center;
		margin: 15px auto;
	}

	.refineCon {
		display: block;
		margin: 0px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.dangqian {
		font-size: 15px;
		font-weight: normal;
		color: #333333;
		line-height: 15px;
		text-align: center;
		margin-bottom: 3vh;
	}

	.col {
		color: #FF0000;
	}

	.chsab {
		font-size: 13px;
		font-weight: normal;
		color: #333333;
		line-height: 13px;
		text-align: center;
		margin-top: 12px;
	}

	.jihuop {
		padding: 0 10%;

		.wupo {
			display: flex;
			align-items: center;

			.wuimg {
				width: 70px;
				padding: 6px 4px;
				box-sizing: border-box;
				// background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
				// background-size: 100% 100%;
			}
		}

		.wubox {
			flex: 1;
			margin-left: 7px;
		}

		.wuname {
			font-weight: normal;
			font-size: 18px;
			color: #333333;
			line-height: 18px;
			margin-bottom: 20px;
		}

		.wunum {
			font-weight: normal;
			font-size: 15px;
			color: #333333;
			line-height: 15px;
		}

		.color {
			color: #FF3333;
		}

		.ghang {
			width: 100%;
			margin: 10px 0;
		}

		.wujieshao {
			font-weight: normal;
			font-size: 15px;
			color: #333333;
			line-height: 19px;
		}
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			display: block;
			margin: 0 auto;
			width: 53%;
			padding: 4% 3%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.bg1 {
		background: url(http://image.qxgm.site/tdz/img/quality/1.png) no-repeat;
		background-size: 100% 100%;
	}

	.bg2 {
		background: url(http://image.qxgm.site/tdz/img/quality/2.png) no-repeat;
		background-size: 100% 100%;
	}

	.bg3 {
		background: url(http://image.qxgm.site/tdz/img/quality/3.png) no-repeat;
		background-size: 100% 100%;
	}

	.bg4 {
		background: url(http://image.qxgm.site/tdz/img/quality/4.png) no-repeat;
		background-size: 100% 100%;
	}

	.bg5 {
		background: url(http://image.qxgm.site/tdz/img/quality/5.png) no-repeat;
		background-size: 100% 100%;
	}

	.bg6 {
		background: url(http://image.qxgm.site/tdz/img/quality/6.png) no-repeat;
		background-size: 100% 100%;
	}
</style>